<template>
    <div class="card">
        <div class="info">
            <div style="margin-bottom: 20px;">
                <el-page-header @back="goBack">
                    <template #content>
                        <span style="font-weight: bold;"> {{ type }} 详情页 </span>
                    </template>
                </el-page-header>
            </div>


            <CPU v-if="type === 'CPU'" :data="data" />
            <GPU v-else-if="type === 'GPU'" :data="data" />
            <Center v-else-if="type === '主板'" :data="data" />
            <Memory v-else-if="type === '内存'" :data="data" />
            <Ssd v-else-if="type === '固态硬盘'" :data="data" />
            <Hhd v-else-if="type === '硬盘'" :data="data" />

        </div>

        <!-- <Commit   /> -->
        <Commit style="flex: 2;" :type="type" :id="id"></Commit>
    </div>
</template>

<script setup lang="ts">
import CPU from './components/content/CPU.vue';
import GPU from './components/content/GPU.vue';
import Center from './components/content/Center.vue';
import Memory from './components/content/Memory.vue';
import Ssd from './components/content/Ssd.vue';
import Hhd from './components/content/Hhd.vue';
import Commit from "./components/Commit/Commit.vue";
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import { getCPUDataById, getGPUDataById, getMainboardDataById, getMemoryDataById, getSSDDataById, getHDDDataById } from '@/server/assembly/index.ts'



const route = useRoute()
const router = useRouter()
const type = ref(route.query.type as string)
const id = ref(route.query.id as string)
const data = ref({})




onMounted(() => {

    if (type.value && id.value) {
        getInfo(type.value, id.value)
    } else {
        router.push({ name: 'Assembly' })

    }
})

const getInfo = async (type: string, id: string) => {
    const typeHandlers = {
        "CPU": getCPUDataById,
        "GPU": getGPUDataById,
        "主板": getMainboardDataById,
        "内存": getMemoryDataById,
        "固态硬盘": getSSDDataById,
        "硬盘": getHDDDataById
    };
    const handler = typeHandlers[type];
    if (handler) {
        const res = await handler(id)
        data.value = res.data
    }
}

const goBack = () => {
    router.push({ name: 'Assembly' })
}





</script>

<style scoped lang="scss">
::-webkit-scrollbar {
    display: none;
}
.card {
    height: 100vh;
    overflow: hidden;
    display: flex;

    .el-image {
        border: 1px solid #b9b9b9;
    }


    .rate {
        font-size: 20px;
        font-weight: bold;
    }


    .title {
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
    }

    .info {
        padding: 20px;
        overflow-y: auto;


    }



}
</style>